<template>
  <div class="edit-address">
    <div class="edit-address-header border-bottom">
      <div class="back-icon" @click="goBack">
        <i class="el-icon-arrow-left">返回</i>
      </div>
      <div class="edit-address-title">
        <p>修改地址</p>
      </div>
      <div class="save-address" @click="save">
        <span>保存</span>
      </div>
    </div>
    <div class="edit-addrss-content" v-for="item in form" :key="item.id">
      <div class="content-box border-bottom">
        <div class="content-title content-cell">
          <span>姓名</span>
        </div>
        <div class="content-value">
          <el-input v-model="item.username" ref="username" placeholder="请输入你的姓名"></el-input>
        </div>
      </div>
      <div class="content-box border-bottom">
        <div class="content-title content-cell">
          <span>手机号码</span>
        </div>
        <div class="content-value">
          <el-input v-model="item.phone" ref="phone" placeholder="请输入你的手机号码"></el-input>
        </div>
      </div>
      <div class="content-box border-bottom">
        <div class="content-title content-cell">
          <span>地址</span>
        </div>
        <div class="content-value">
          <el-input v-model="item.address" ref="address" placeholder="请输入你的地址"></el-input>
        </div>
      </div>
      <div class="content-box border-bottom">
        <div class="content-title content-cell default-item">
          <span>设置为默认地址</span>
        </div>
        <div class="content-value default-value">
          <el-switch
            v-model="item.default_address"
            active-color="#13ce66"
            inactive-color="#ff4949"
            ref="default_btn"
          >
          </el-switch>
        </div>
      </div>
    </div>
    <div class="cancel-box">
      <div class="cancel-address" @click="dialogFormVisible = true">
        <span>删除地址</span>
      </div>
    </div>

    <el-dialog title="提示" :visible.sync="dialogFormVisible" width="80%">
      <span>你确定要删掉我吗？</span>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="comfirmCancel">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Edit_address",
    data () {
      return {
        dialogFormVisible: false,
        form: [
          {
            id: '01',
            username: '我就是狗剩先生啊',
            phone: '18577995017',
            address: '2栋C605',
            default_address: true,
          }
        ],
        newForm:[]
      }
    },
    watch: {
      "form.username" () {
        console.log(this.form.username.value)
      }
    },
    methods: {
      goBack () {
        this.$router.push('/address')
      },
      save () {
       this.newForm=[{
          id:'001',
          username:'我不是狗剩先生啊',
          phone:'110',
          address: '12',
          default_address: false
        }]
        this.form = this.newForm
        console.log(111)
      },
      comfirmCancel () {
        this.form={};
        this.dialogFormVisible= false
        this.$router.push('/address')
        console.log('已删除')
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .edit-address >>> .el-input__inner
    flex: 2;
    border: 0;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: right;
    padding-right: 0
  /* header */
  .edit-address-header
    width: 100%;
    height: 50px;
    background: #fff;
    .edit-address-title,.back-icon
      float: left;
      color: #666;
      text-align: center;
    .back-icon
      width: 20%;
      line-height: 50px;
      z-index: 2;
      color: #1989fa;
      font-size: 16px;
    .edit-address-title
      width: 60%;
      line-height: 50px;
      font-size: 18px;
    .edit-address-title p
      margin: 0;
    .save-address
      width: 20%;
      float: left;
      text-align: center;
      line-height: 50px;
      font-size: 15px;
      font-weight: 500;
      color: #666;
    .save-address span
      padding: 6px 8px;
      background: #f7f7f7;
      border-radius: 3px;
      color: cornflowerblue;
      font-size: 14px;

  /* 内容 */
  .content-box, .content-cell
    display: flex;
  .content-box
    padding: 10px 15px;
    line-height: 30px;
    color: #666;
    font-size: 14px;
  .content-cell
    flex: 1;
  .content-title
    max-width: 90px;
  .content-value
    flex: 2;
  .default-item
    max-width:100px
  .default-value
    text-align: right;
    flex: 1;
  /* 删除 */
  .el-message-box__wrapper >>> .el-message-box
    width: 95% !important
    background red !important
  .cancel-box
    padding: 40px 15px
    .cancel-address
      padding: 10px 15px;
      text-align: center;
      color: #fff;
      background: #ef3d29;
      font-family: sans-serif;
      font-weight: lighter;
  /* 弹出框 */
  .el-dialog__wrapper >>> .el-form-item
    margin-bottom 0
</style>
